<!DOCTYPE HTML>
<html >
<head>
<meta charset="UTF-8"/>
<title>raphael markup usage</title>
</head>
<body>


<h1>RaphaelMarkup examples and uses </h1>

<p>@author: Sebastián Gurin</p>
<p>This document contains a set of examples that shows how to use certain features of raphael markup framework.</p>




<h2><a href="../test/examples/rm_modifydomtest.html">
Manipulating the XML DOM and the updating the drawings</a></h2>

<p>In 
<a href="../test/examples/rm_modifydomtest.html">this</a>
example we render a XML drawing with ajax, then perform a serie 
of modification using the XML DOM object with jquery API like changing 
some elements attributes and creating some other new elements, and finally calling the framework to update the changes in the drawing itself.
. Please take the time to read its source code</p>

<p>If using jquery API form manipulating the DOM, it is important to notive that, 
because the XML DOM is not valid HTML, jquery functions accepting markup as strings
won't work because jquery validates these strings to be valid html markup before adding 
them to the DOM. So for example, the following code <b>won't work</b> for appending new elements to the drawing DOM:</p>

<pre>
rdoc.find(".set1").append('&lt;rect id="r1"' x="12" y="20" width="80" height="80">&lt;/rect>');
var rect1 = rdoc.find("#r1"); //DONT WORK!
</pre> 

<p>Fortunately, we have the helper tool rm.createElement to do the same as 
above in a single call:</p>

<pre>
var rect1 = rm.createElement(rdoc.find(".set1"), "rect", 
	{x: 12, y: 20, width: 80, height: 80, id: "r1"});
</pre>






<h2><a href="../test/examples/exportingToXML.html">
Exporting a raphaël paper instance to XML</a></h2>

<a href="../test/examples/exportingToXML.html">
In this example</a> we will read a raphael paper instance in a XML DOM object.
This XML DOM object follows the syntax of raphaelmarkup and can be used for 
serialization purposes but also for manipulating the paper using XML API. Then
the modified DOM can be (re)rendered in the html document.</p>

<p>In concrete, we will create a raphaël paper and draw some things in it, using common raphaël javascript API.
then we will export the paper to XML syntax using the framework. Then we will 
remove the created raphael paper from the doucment, and try to render 
the exported xml document and see if its equals to raphael original paper.</p>

<p>Take time to read the sources </p>





<h2><a href="../test/examples/jsonTest1.html">
Importing raphaël json data</a></h2>

<a href="../test/examples/jsonTest1.html">
In this example we show how to create a XML &RM; document from &R; JSON data, 
like documented in <a href="http://raphaeljs.com/reference.html#Paper.add">Paper.add()</a>. 
This format is also supported by <a href="http://www.irunmywebsite.com/raphael/SVGTOHTML_LIVE.php">Charles svg to raphaël conversor</a>




<h2><a href="../test/examples/fontTest1.html">
Text and fonts</a></h2>
<p><a href="../test/examples/fontTest1.html">This example</a> shows how to print text with and without cufon fonts. </p>



<h2><a href="../test/examples/raphaelTests1.html">
Raphael Use Cases</a></h2>
<p><a href="../test/examples/fontTests1.html">This example</a> shows some examples of raphaeljs.com
using markup</p>




<h2><a href="../test/examples/scriptingTest1.html">
Scripting rendered XML drawings</a></h2>
<p>This example shows how easy is to script the generated drawings after they are rendered. 
In addition to the full raphaël javascript API, we can also use jquery API for accessing the dom, for example, 
selecting some shapes using a CSS3 selector and then manipulating only those shapes.</p>






<h2><a href="../test/examples/cssTest1.html">
CSS for styling shapes</a></h2>
<p>RaphaelMarkup support a language similar to CSS for setting shape's attributes (extension)<a href="../test/examples/cssTest1.html">
This example</a> shows a simple example of using CSS for styling shapes. </p>



<h2><a href="../test/examples/templatingTest1.html">
Template test</a></h2>
<p>RaphaelMarkup supports templates (extension) so users can define complex shapes and reutilize them on the paper.</p>
<p>The RaphaelMarkup renderer will first preprocess the templates and generate
shapes from tempalte code, and then proceed to render them.</p>
<p>Hope the example is clear enought to understand the concept, please take time of reading the sources. </p> 



<h2><a href="../test/examples/percentualTest1.html">
Percent (relative) attribute values</a></h2>
<p>RaphaelMarkup support percent values for attributes related to  shape's bounds
like x, y, cx, cy, width, height ,rx, ry. (extension)
<a href="../test/examples/percentualTest1.html">
This example</a> shows a simple example of using percent attribute values. 
So a shape can specify its bounds with measures relative to its parent.</p>



<h2><a href="../test/examples/include.html">
Including other xml inside rm document</a></h2>
<p>RM support 1 level only xml inclussion. In a main xml document we can include other xml documents using the include tag (one level inclussion only). 
the referenced xml will be including in the markup and only after all includes resolve successfully, the dom is proccessed. .
<a href="../test/examples/include.html"></a></p>




<h2><a href="../test/examples/customTagRenderers.html">
Custom tag renderers</a></h2>
<p>Define new base types using custom tag rendererers, so you can render new base types with your own javascript code. it is a more native wway of doing templates. the difference with templates is that while templates are based on base tags. 
with custom tag renderes you can define new base-tags, the renderers are fully 
written in javascript while templates are written RM template language. Then you can use your new base tags defined with custom renderers in your templates. More 
<a href="../test/examples/customTagRenderers.html"></a></p>



</body>
</html>
